<!DOCTYPE html>

<html>
<head>
<title>Web Application - web.Scope - QOR5 Document</title>

<meta name='description'>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<base href='/docs/'>

<link href='index.css' rel='stylesheet' type='text/css'>

<script type='text/javascript' defer src='index.js'></script>
</head>

<body>
<div id='app' v-cloak>
<div v-init-context:vars='{hideAside: false}' class='flex h-screen'>
<div class='flex-1 flex flex-col overflow-hidden'>
<div class='flex h-full'>
<aside v-show='!vars.hideAside' id='menuScroller' class='flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto'>
<div class='h-12'><search></search></div>

<ul class='px-0 py-3 mx-0 text-base font-normal list-none text-gray-700'>
<li class='m-0'>
<a href='index.html' id='index.html' onclick='window.storeMenuState("index.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Introduction</a>
</li>

<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Getting Started</li>

<li class='m-0'>
<a href='getting-started/one-minute-quick-start.html' id='getting-started/one-minute-quick-start.html' onclick='window.storeMenuState("getting-started/one-minute-quick-start.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>1 Minute Quick Start</a>
</li>

<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Building Admin</li>

<li class='m-0'>
<a href='basics/presets-instant-crud.html' id='basics/presets-instant-crud.html' onclick='window.storeMenuState("basics/presets-instant-crud.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>presets, Instant CRUD</a>
</li>

<li class='m-0'>
<a href='basics/listing.html' id='basics/listing.html' onclick='window.storeMenuState("basics/listing.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Listing</a>
</li>

<li class='m-0'>
<a href='basics/listing-customizations.html' id='basics/listing-customizations.html' onclick='window.storeMenuState("basics/listing-customizations.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Listing Customizations</a>
</li>

<li class='m-0'>
<a href='basics/filter.html' id='basics/filter.html' onclick='window.storeMenuState("basics/filter.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Filters</a>
</li>

<li class='m-0'>
<a href='presets-guide/editing-customizations.html' id='presets-guide/editing-customizations.html' onclick='window.storeMenuState("presets-guide/editing-customizations.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Editing</a>
</li>

<li class='m-0'>
<a href='basics/brand.html' id='basics/brand.html' onclick='window.storeMenuState("basics/brand.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Brand</a>
</li>

<li class='m-0'>
<a href='basics/menu.html' id='basics/menu.html' onclick='window.storeMenuState("basics/menu.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Menu</a>
</li>

<li class='m-0'>
<a href='presets-guide/detail-page-for-complex-object.html' id='presets-guide/detail-page-for-complex-object.html' onclick='window.storeMenuState("presets-guide/detail-page-for-complex-object.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Detailing</a>
</li>

<li class='m-0'>
<a href='basics/layout.html' id='basics/layout.html' onclick='window.storeMenuState("basics/layout.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Layout</a>
</li>

<li class='m-0'>
<a href='basics/login.html' id='basics/login.html' onclick='window.storeMenuState("basics/login.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Login</a>
</li>

<li class='m-0'>
<a href='presets-guide/permissions.html' id='presets-guide/permissions.html' onclick='window.storeMenuState("presets-guide/permissions.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Permissions</a>
</li>

<li class='m-0'>
<a href='presets-guide/role.html' id='presets-guide/role.html' onclick='window.storeMenuState("presets-guide/role.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Role</a>
</li>

<li class='m-0'>
<a href='basics/shortcut.html' id='basics/shortcut.html' onclick='window.storeMenuState("basics/shortcut.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Keyboard Shortcut</a>
</li>

<li class='m-0'>
<a href='basics/confirm-dialog.html' id='basics/confirm-dialog.html' onclick='window.storeMenuState("basics/confirm-dialog.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Confirm Dialog</a>
</li>

<li class='m-0'>
<a href='slug.html' id='slug.html' onclick='window.storeMenuState("slug.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Slug</a>
</li>

<li class='m-0'>
<a href='seo.html' id='seo.html' onclick='window.storeMenuState("seo.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>SEO</a>
</li>

<li class='m-0'>
<a href='activity-log.html' id='activity-log.html' onclick='window.storeMenuState("activity-log.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Activity Log</a>
</li>

<li class='m-0'>
<a href='basics/worker.html' id='basics/worker.html' onclick='window.storeMenuState("basics/worker.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Worker</a>
</li>

<li class='m-0'>
<a href='basics/publish.html' id='basics/publish.html' onclick='window.storeMenuState("basics/publish.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Publish</a>
</li>

<li class='m-0'>
<a href='basics/i18n.html' id='basics/i18n.html' onclick='window.storeMenuState("basics/i18n.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Internationalization</a>
</li>

<li class='m-0'>
<a href='basics/l10n.html' id='basics/l10n.html' onclick='window.storeMenuState("basics/l10n.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Localization</a>
</li>

<li class='m-0'>
<a href='basics/redirection.html' id='basics/redirection.html' onclick='window.storeMenuState("basics/redirection.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Redirection</a>
</li>

<li class='m-0'>
<a href='basics/custom-page.html' id='basics/custom-page.html' onclick='window.storeMenuState("basics/custom-page.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Custom Pages</a>
</li>

<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Web Application</li>

<li class='m-0'>
<a href='advanced-functions/the-go-html-builder.html' id='advanced-functions/the-go-html-builder.html' onclick='window.storeMenuState("advanced-functions/the-go-html-builder.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>The Go HTML builder</a>
</li>

<li class='m-0'>
<a href='basics/page-func-and-event-func.html' id='basics/page-func-and-event-func.html' onclick='window.storeMenuState("basics/page-func-and-event-func.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Page Func and Event Func</a>
</li>

<li class='m-0'>
<a href='basics/layout-function-and-page-injector.html' id='basics/layout-function-and-page-injector.html' onclick='window.storeMenuState("basics/layout-function-and-page-injector.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Layout Function and Page Injector</a>
</li>

<li class='m-0'>
<a href='vuetify-components/lazy-portals.html' id='vuetify-components/lazy-portals.html' onclick='window.storeMenuState("vuetify-components/lazy-portals.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Lazy Portals</a>
</li>

<li class='m-0'>
<a href='basics/switch-pages-with-push-state.html' id='basics/switch-pages-with-push-state.html' onclick='window.storeMenuState("basics/switch-pages-with-push-state.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Switch Pages with Push State</a>
</li>

<li class='m-0'>
<a href='basics/reload-page-with-a-flash.html' id='basics/reload-page-with-a-flash.html' onclick='window.storeMenuState("basics/reload-page-with-a-flash.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Reload Page with a Flash</a>
</li>

<li class='m-0'>
<a href='basics/partial-refresh-with-portal.html' id='basics/partial-refresh-with-portal.html' onclick='window.storeMenuState("basics/partial-refresh-with-portal.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Partial Refresh with Portal</a>
</li>

<li class='m-0'>
<a href='basics/manipulate-page-url-in-event-func.html' id='basics/manipulate-page-url-in-event-func.html' onclick='window.storeMenuState("basics/manipulate-page-url-in-event-func.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Manipulate Page URL in Event Func</a>
</li>

<li class='m-0'>
<a href='basics/summary-of-event-response.html' id='basics/summary-of-event-response.html' onclick='window.storeMenuState("basics/summary-of-event-response.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Summary of Event Response</a>
</li>

<li class='m-0'>
<a href='basics/web-scope.html' id='basics/web-scope.html' onclick='window.storeMenuState("basics/web-scope.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-blue-500'>web.Scope</a>
</li>

<li class='m-0'>
<a href='basics/event-handling.html' id='basics/event-handling.html' onclick='window.storeMenuState("basics/event-handling.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Event Handling</a>
</li>

<li class='m-0'>
<a href='basics/form-handling.html' id='basics/form-handling.html' onclick='window.storeMenuState("basics/form-handling.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Form Handling</a>
</li>

<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>UI Components</li>

<li class='m-0'>
<a href='vuetify-components/basic-inputs.html' id='vuetify-components/basic-inputs.html' onclick='window.storeMenuState("vuetify-components/basic-inputs.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Basic Inputs</a>
</li>

<li class='m-0'>
<a href='vuetify-components/a-taste-of-using-vuetify-in-go.html' id='vuetify-components/a-taste-of-using-vuetify-in-go.html' onclick='window.storeMenuState("vuetify-components/a-taste-of-using-vuetify-in-go.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>A Taste of using Vuetify in Go</a>
</li>

<li class='m-0'>
<a href='vuetify-components/linkage-select.html' id='vuetify-components/linkage-select.html' onclick='window.storeMenuState("vuetify-components/linkage-select.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Linkage Select</a>
</li>

<li class='m-0'>
<a href='components-guide/composite-new-component-with-go.html' id='components-guide/composite-new-component-with-go.html' onclick='window.storeMenuState("components-guide/composite-new-component-with-go.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Composite new Component With Go</a>
</li>

<li class='m-0'>
<a href='components-guide/integrate-a-heavy-vue-component.html' id='components-guide/integrate-a-heavy-vue-component.html' onclick='window.storeMenuState("components-guide/integrate-a-heavy-vue-component.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Integrate a heavy Vue Component</a>
</li>

<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Appendix</li>

<li class='m-0'>
<a href='appendix/all-demo-examples.html' id='appendix/all-demo-examples.html' onclick='window.storeMenuState("appendix/all-demo-examples.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>All Demo Examples</a>
</li>
</ul>
</aside>

<main class='flex flex-col w-full bg-white overflow-x-hidden overflow-y-auto'>
<div id='docContentBox' class='flex flex-row w-full'>
<div class='flex flex-grow flex-col w-2/3'>
<div class='flex flex-row'>
<button @click='vars.hideAside = !vars.hideAside' class='w-12 h-12 p-4'>
<div class='w-4 h-4 fill-current text-gray-300'>
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 2 12 L 2 11 L 14 11 L 14 12 Z M 2 8.5 L 2 7.5 L 14 7.5 L 14 8.5 Z M 2 5 L 2 4 L 14 4 L 14 5 Z M 2 5 "/>
</g>
</svg>
</div>
</button>
</div>

<div id='docMainBox' class='px-16 pb-12 pt-4 overflow-auto'>
<h1 class='mb-8'>web.Scope</h1>

<div class='border-t'><h2><a name="initialize-form-and-locals-vue-variables" class="anchor" href="#initialize-form-and-locals-vue-variables" rel="nofollow" aria-hidden="true"><span class="octicon octicon-link"></span></a>Initialize form and locals vue variables</h2>

<p>Since we we don&#39;t write vue javascript code,
It&#39;s not easy to add reactive object to that can be used in vue templates. which is returned from the server.
reactive object are used to trigger view updates,
We pre-set the <code>locals</code> and <code>form</code> object as a reactive object,
and then we can initialize various types of values and slot it into <code>locals</code>.
And the valid scopes of these values are all inside web.Scope().</p>

<p>For example:</p>

<highlightjs :language='"go"' :code='"func WebScopeUseLocals(ctx *web.EventContext) (pr web.PageResponse, err error) {\n\tpr.Body = Div(\n\t\tButton(\"Test Can Not Change Other Scope\").\n\t\t\tAttr(\"@click\", `locals.btnLabel = \"YES\"`),\n\t\tweb.Scope(\n\t\t\tDiv(\n\t\t\t\tSelect(\n\t\t\t\t\tOption(\"\").Attr(\"v-text\", \"item.text\").\n\t\t\t\t\t\tAttr(\"v-for\", \"(item, i) in locals.items\").\n\t\t\t\t\t\tAttr(\":key\", \"i\").\n\t\t\t\t\t\tAttr(\":value\", \"i\").\n\t\t\t\t\t\tAttr(\"color\", \"red\"),\n\t\t\t\t).\n\t\t\t\t\tAttr(\"multiple\", true).\n\t\t\t\t\tAttr(\"style\", \"width:300px\").\n\t\t\t\t\tAttr(\"v-model\", \"locals.selectedItem\"),\n\t\t\t),\n\t\t\tButton(\"\").\n\t\t\t\tAttr(\"v-text\", \"locals.btnLabel + locals.selectedItem\").\n\t\t\t\tAttr(\"@click\", `\nif (locals.btnLabel == \"Add\") {\n\tlocals.items.push({text: \"B\", icon: \"mdi-check\"});\n\tlocals.btnLabel = \"Remove\";\n} else {\n\tlocals.items.splice(locals.selectedItem, 1)\n\tlocals.btnLabel = \"Add\";\n}`),\n\t\t).Init(`{ selectedItem: 0, btnLabel:\"Add\", items: [{text: \"A\", icon: \"mdi-clock\"}]}`).\n\t\t\tDashInit(\"{hello:123}\").\n\t\t\tVSlot(\"{ locals ,dash }\"),\n\t)\n\treturn\n}\n\nvar UseLocalsPB = web.Page(WebScopeUseLocals)\n"'></highlightjs>

<div>
<div class='demo'>
<a href='/examples/web-scope-use-locals' target='_blank'>Check the demo</a>
 | 
<a href='https://github.com/qor5/admin/tree/main/docs/docsrc/../../../../../go/pkg/mod/github.com/qor5/web/v3@v3.0.12-0.20250225073451-8e876be98c21/examples/web-scope.go#L9-L46' target='_blank'>Source on GitHub</a>
</div>
</div>
<p>Use <code>web.Scope()</code> to determine the effective scope of the variable, then use <code>.Init(...).VSlot(&#34;{ locals }&#34;)</code> to initialize the variable and slot it into the <code>locals</code> object.</p>

<p>In <code>VBtn(&#34;&#34;)</code>, you can use the <code>click</code> event to change the variable value in <code>locals</code> to achieve the effect that the page changes with the click.</p>

<p>In <code>VBtn(&#34;Test Can Not Change Other Scope&#34;)</code>, values in <code>locals</code> will not change with the click, because the button is not in <code>web.Scope()</code>.</p>

<p>Video Tutorial (<a href="https://www.youtube.com/watch?v=UPuBvVRhUr0" rel="nofollow">https://www.youtube.com/watch?v=UPuBvVRhUr0</a>)</p>
<h2><a name="use-form" class="anchor" href="#use-form" rel="nofollow" aria-hidden="true"><span class="octicon octicon-link"></span></a>Use form</h2>

<p>The main use of <code>form</code> is to submit one form which is inside another form,
and the two forms are completely independent forms.</p>

<p>In the following example, each color represents a completely separate form. The <code>Material Form</code> contains the <code>Raw Material Form</code>. You can submit the <code>Raw Material Form</code> to the server first. After receiving it, server will save the <code>Raw Material data</code> and return the <code>ID</code>.
In this way, you can submit <code>Raw Material ID</code> directly in the <code>Material Form</code>.</p>

<p>For example:</p>

<highlightjs :language='"go"' :code='"var materialID, materialName, rawMaterialID, rawMaterialName, countryID, countryName, productName string\n\nfunc WebScopeUseForm(ctx *web.EventContext) (pr web.PageResponse, err error) {\n\tpr.Body = Div(\n\t\tH3(\"Form Content\"),\n\t\tPrettyFormAsJSON(ctx),\n\t\tweb.Scope(\n\n\t\t\tDiv(\n\t\t\t\tDiv(\n\t\t\t\t\tFieldset(\n\t\t\t\t\t\tLegend(\"Product Form\"),\n\t\t\t\t\t\tDiv(\n\t\t\t\t\t\t\tLabel(\"Product Name\"),\n\t\t\t\t\t\t\tInput(\"\").\n\t\t\t\t\t\t\t\tType(\"text\").\n\t\t\t\t\t\t\t\tAttr(\"v-model\", \"form.ProductName\"),\n\t\t\t\t\t\t),\n\t\t\t\t\t\tDiv(\n\t\t\t\t\t\t\tLabel(\"Material ID\"),\n\t\t\t\t\t\t\tInput(\"\").\n\t\t\t\t\t\t\t\tType(\"text\").Disabled(true).\n\t\t\t\t\t\t\t\tAttr(\"v-model\", \"form.MaterialID\"),\n\t\t\t\t\t\t),\n\n\t\t\t\t\t\tweb.Scope(\n\t\t\t\t\t\t\tFieldset(\n\t\t\t\t\t\t\t\tLegend(\"Material Form\"),\n\n\t\t\t\t\t\t\t\tDiv(\n\t\t\t\t\t\t\t\t\tLabel(\"Material Name\"),\n\t\t\t\t\t\t\t\t\tInput(\"\").\n\t\t\t\t\t\t\t\t\t\tType(\"text\").\n\t\t\t\t\t\t\t\t\t\tAttr(\"v-model\", \"form.MaterialName\"),\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tDiv(\n\t\t\t\t\t\t\t\t\tLabel(\"Raw Material ID\"),\n\t\t\t\t\t\t\t\t\tInput(\"\").\n\t\t\t\t\t\t\t\t\t\tType(\"text\").Disabled(true).\n\t\t\t\t\t\t\t\t\t\tAttr(\"v-model\", \"form.RawMaterialID\"),\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tweb.Scope(\n\t\t\t\t\t\t\t\t\tFieldset(\n\t\t\t\t\t\t\t\t\t\tLegend(\"Raw Material Form\"),\n\n\t\t\t\t\t\t\t\t\t\tDiv(\n\t\t\t\t\t\t\t\t\t\t\tLabel(\"Raw Material Name\"),\n\t\t\t\t\t\t\t\t\t\t\tInput(\"\").\n\t\t\t\t\t\t\t\t\t\t\t\tType(\"text\").\n\t\t\t\t\t\t\t\t\t\t\t\tAttr(\"v-model\", \"form.RawMaterialName\"),\n\t\t\t\t\t\t\t\t\t\t),\n\n\t\t\t\t\t\t\t\t\t\tButton(\"Send\").Style(`background: orange;`).Attr(\"@click\", web.POST().EventFunc(\"updateValue\").Go()),\n\t\t\t\t\t\t\t\t\t).Style(`background: orange;`),\n\t\t\t\t\t\t\t\t).VSlot(\"{ form, locals }\").FormInit(struct{ RawMaterialName string }{RawMaterialName: rawMaterialName}),\n\n\t\t\t\t\t\t\t\tButton(\"Send\").Style(`background: brown;`).Attr(\"@click\", web.POST().EventFunc(\"updateValue\").Go()),\n\t\t\t\t\t\t\t).Style(`background: brown;`),\n\t\t\t\t\t\t).VSlot(\"{ form, locals }\"),\n\n\t\t\t\t\t\tDiv(\n\t\t\t\t\t\t\tLabel(\"Country ID\"),\n\t\t\t\t\t\t\tInput(\"\").\n\t\t\t\t\t\t\t\tType(\"text\").Disabled(true).\n\t\t\t\t\t\t\t\tAttr(\"v-model\", \"form.CountryID\"),\n\t\t\t\t\t\t),\n\n\t\t\t\t\t\tweb.Scope(\n\t\t\t\t\t\t\tFieldset(\n\t\t\t\t\t\t\t\tLegend(\"Country Of Origin Form\"),\n\n\t\t\t\t\t\t\t\tDiv(\n\t\t\t\t\t\t\t\t\tLabel(\"Country Name\"),\n\t\t\t\t\t\t\t\t\tInput(\"\").\n\t\t\t\t\t\t\t\t\t\tType(\"text\").\n\t\t\t\t\t\t\t\t\t\tAttr(\"v-model\", \"form.CountryName\"),\n\t\t\t\t\t\t\t\t),\n\n\t\t\t\t\t\t\t\tButton(\"Send\").Style(`background: red;`).Attr(\"@click\", web.POST().EventFunc(\"updateValue\").Go()),\n\t\t\t\t\t\t\t).Style(`background: red;`),\n\t\t\t\t\t\t).VSlot(\"{ form, locals }\").FormInit(struct{ CountryName string }{CountryName: countryName}),\n\n\t\t\t\t\t\tDiv(\n\t\t\t\t\t\t\tButton(\"Send\").Style(`background: grey;`).Attr(\"@click\", web.POST().EventFunc(\"updateValue\").Go())),\n\t\t\t\t\t).Style(`background: grey;`)),\n\t\t\t).Style(`width:600px;`),\n\t\t).VSlot(\"{ locals, form }\").FormInit(\"{ProductName: &#39;Product1&#39;, MaterialID: &#39;55&#39;, MaterialName: &#39;Material1&#39;, RawMaterialID: &#39;77&#39;, RawMaterialName: &#39;RawMaterial1&#39;, CountryID: &#39;88&#39;, CountryName: &#39;Country1&#39;}\"),\n\t)\n\n\treturn\n}\n\nfunc updateValue(ctx *web.EventContext) (er web.EventResponse, err error) {\n\tctx.R.ParseForm()\n\tif v := ctx.R.Form.Get(\"ProductName\"); v != \"\" {\n\t\tproductName = v\n\t}\n\tif v := ctx.R.Form.Get(\"MaterialName\"); v != \"\" {\n\t\tmaterialName = v\n\t\tmaterialID = \"66\"\n\t}\n\tif v := ctx.R.Form.Get(\"RawMaterialName\"); v != \"\" {\n\t\trawMaterialName = v\n\t\trawMaterialID = \"88\"\n\t}\n\tif v := ctx.R.Form.Get(\"CountryName\"); v != \"\" {\n\t\tcountryName = v\n\t\tcountryID = \"99\"\n\t}\n\ter.Reload = true\n\treturn\n}\n\nvar UsePlaidFormPB = web.Page(WebScopeUseForm).\n\tEventFunc(\"updateValue\", updateValue)\n"'></highlightjs>

<div>
<div class='demo'>
<a href='/examples/web-scope-use-form' target='_blank'>Check the demo</a>
 | 
<a href='https://github.com/qor5/admin/tree/main/docs/docsrc/../../../../../go/pkg/mod/github.com/qor5/web/v3@v3.0.12-0.20250225073451-8e876be98c21/examples/web-scope.go#L48-L165' target='_blank'>Source on GitHub</a>
</div>
</div>
<p>Use <code>web.Scope().VSlot(&#34;{ form }&#34;)</code> to determine the scope of a form.</p>
</div>
</div>
</div>

<div class='font-medium text-base hidden xl:block text-gray-600 pt-4'>
<div class='sticky top-4 w-52'>On This Page<toc></toc></div>
</div>
</div>
<search-result></search-result></main>
</div>
</div>
</div>
</div>
</body>
</html>
